<template>
	<!-- 房屋信息列表组件 -->
	<view class="infolist-content">
		<image class="info-left" :src="houseData.images[0]" mode=""></image>
		<view class="info-right">
			<view class="title">{{housestyle==0?houseData.name:houseData.title}}</view>
			<view class="homeinfo">
				<text v-if="housestyle==0">{{use[houseData.use-1]}} | 建面{{houseData.minArea}}-{{houseData.maxArea}}m²</text>
				<text v-else>{{use[houseData.use-1]}} | {{houseData.area}}m² | {{furnish[houseData.furnish-1]}}</text>
			</view>
			<view class="lable-content">
				<view class="item-lable"  v-for="item2 in houseData.tags" :key="item2">
					{{item2}}
				</view>
			</view>
			<view class="pricecontent">
				<!-- 相比新房，二手房，租房需判断-->
				{{houseData.price}}{{housestyle==1?" 万":"元/平"}}
				<text class="squareprice" v-if="housestyle==1">{{(Math.floor(houseData.price/houseData.area))*10000}}元/m²</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"houseinfo-list",
		props:{
			// 房屋列表数据
			houseData:{
				type:Object,
			},
			//房屋类型（用于判断价格处的显示）新房0；租房和二手房1
			housestyle:{
				type:Number,
				default:0,
			}
		},
		data() {
			return {
				use:["住宅","公寓"],
				furnish:["清水","精装"],
				type:["一室一厅","两室一厅","三室一厅","四室两厅","五室两厅"]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.infolist-content{
		width: 100%;
		display: flex;
		border-bottom: 1px solid #e1e1e1;
		margin-bottom: 40rpx;
		.info-left{
			width: 260rpx;
			height: 260rpx;
			margin-bottom: 60rpx;
		}
		.info-right{
			margin: 6rpx 0 0 40rpx;
			.title{
				font-size: 35rpx;
				color: #000;
				font-weight: 400;
				padding: 0 0 10rpx 0;
			}
			.homeinfo{
				font-size: 25rpx;
				color: #000;
				display: flex;
			}
			.lable-content
			{
				display: flex;
				color: #fff;
				margin-top: 10rpx;
				font-size: 25rpx;
				.item-lable{
					margin-left:5rpx ;
					padding: 5rpx;
					background: #307dfb;
				}
			}
			.pricecontent{
				margin-top: 20rpx;
				color: #d95a5a;
				font-size: 40rpx;
				.squareprice{
					font-size: 30rpx;
					color: #d5d4d4;
					margin-left: 20rpx; ;
				}
			}
		}
	}
	
</style>